<!-- 库存统计 -->
<template>
  <h1 class="title">库存统计</h1>
  <div style="display: flex;">
    <el-card style="width: 820px; background-color: #f8f3ed;" class="card">
      <h1>库存占比变化图</h1>
      <div ref="chart" id="bie" style="width: 50%; height: 400px; margin-left: auto; margin-right: auto;"></div>
    </el-card>

    <el-card style="width: 820px; background-color: #f8f3ed;">
      <BarChart></BarChart>
    </el-card>
  </div>
  <div style="display: flex; margin-top: 15px;">
      <el-card class="card1 img-card1" style="color: #5470c6;height: 240px;">
      <h2>蔬菜类</h2>
      <p>占比：{{ (literatureCount / booksCount * 100).toFixed(2) }}%</p>
      <p>数量：{{ literatureCount }} 个</p>
      </el-card>
      <el-card class="card1 img-card2" style="color: #91cc75;height: 240px;">
      <h2>零食类</h2>
      <p>占比：{{ (scienceCount / booksCount * 100).toFixed(2) }}%</p>
      <p>数量：{{ scienceCount }} 个</p>
    </el-card>
    <el-card class="card1 img-card3" style="color: #fac858;height: 240px;">
      <h2>玩具类</h2>
      <p>占比：{{ (artCategoryCount / booksCount * 100).toFixed(2) }}%</p>
      <p>数量：{{ artCategoryCount }} 个</p>
    </el-card>
    <el-card class="card1 img-card4" style="color: #e10601;height: 240px;">
      <h2>生活用品类</h2>
      <p>占比：{{ (societyCount / booksCount * 100).toFixed(2) }}%</p>
      <p>数量：{{ societyCount }} 本</p>
    </el-card>
    <el-card class="card1 img-card5" style="color: #73c0de;height: 240px;">
      <h2>其它类</h2>
      <p>占比：{{ (otherCount / booksCount * 100).toFixed(2) }}%</p>
      <p>数量：{{ otherCount }} 本</p>
    </el-card>
  </div>
  </template>

  <script lang="ts">
  export default {
    name: 'newview10',
  }
  </script>

  <script lang="ts" setup>
  import { computed, nextTick, onMounted, ref, watch } from 'vue';
  import { type Book, BookStatus } from '../models/book'
  import { getBooksData } from '../models/getBooksData';
  import * as echarts from 'echarts/core';
  import BarChart from './BarChart.vue';

  import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
  import { PieChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart } from 'echarts/charts';
  import { GridComponent } from 'echarts/components';
  // import type { ECharts } from 'echarts';
  // 注册组件
  echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LineChart, GridComponent]);


  const data = ref<object[]>([]);
  const chart = ref<HTMLDivElement | null>(null);
  const myChart = ref<echarts.ECharts | null>(null); // 创建一个 ref 来存储 myChart

  // 全部图书列表数据
  const booksData = ref<Book[]>([]);
  const booksCount = ref(0);
  // 不同分类图书的数量
  const literatureCount = ref(0);
  const scienceCount = ref(0);
  const artCategoryCount = ref(0);
  const societyCount = ref(0);
  const otherCount = ref(0);

  // 数据传递给统计图
  const dataValue = ref<number[]>([]);
  // 异步获取数据
  onMounted( async () => {
    booksData.value = await getBooksData()
    booksCount.value = booksData.value.reduce((sum, item) => sum += item.count, 0)
    literatureCount.value = booksData.value.filter(item => item.status === BookStatus.LITERATURE).reduce((sum, item) => sum += item.count, 0)
    scienceCount.value = booksData.value.filter(item => item.status === BookStatus.SCIENCE).reduce((sum, item) => sum += item.count, 0)
    artCategoryCount.value = booksData.value.filter(item => item.status === BookStatus.ARTCATEGORY).reduce((sum, item) => sum += item.count, 0)
    societyCount.value = booksData.value.filter(item => item.status === BookStatus.SOCIETY).reduce((sum, item) => sum += item.count, 0)
    otherCount.value = booksData.value.filter(item => item.status === BookStatus.OTHER).reduce((sum, item) => sum += item.count, 0)

    dataValue.value = [literatureCount.value, scienceCount.value, artCategoryCount.value, societyCount.value, otherCount.value]
    localStorage.setItem('dataValue', JSON.stringify(dataValue.value))
  })


  async function fetchData() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve([
          { value: literatureCount.value, name: '蔬菜类' },
          { value: scienceCount.value, name: '零食类' },
          { value: artCategoryCount.value, name: '玩具类' },
          { value: societyCount.value, name: '生活用品类' },
          { value: otherCount.value, name: '其它类' }
        ]);
      }, 1000);
    });
  }

  const loadChartData = async () => {
    data.value = await fetchData() as object[];
  };

  onMounted(async () => {
    await loadChartData();
    myChart.value = echarts.init(chart.value); // 初始化图表
    myChart.value.setOption(option1.value); // 设置图表选项

    watch(data, () => {
      // 监视数据变化并更新图表
      if (myChart.value) {
        myChart.value.setOption(option1.value);
      }
    });
  });


  const option1 = computed(() => {
    return {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data.value // 确保引用数据的值
        }
      ]
    };
  });
  </script>


  <style scoped lang="scss">
  .title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 25px;
  }
  .el-card {
    margin-bottom: 20px;
    margin-right: 20px;
  }
  .card1 {
    width: 312px;
    height: 185px;

  }
  .img-card1 {
    background: url('../assets/images/picture1.jpg') 70% 35% no-repeat;
  }
  .img-card2 {
    background: url('../assets/images/picture3.jpg') 0% 50% no-repeat;
  }
  .img-card3{
    background: url('../assets/images/picture1.jpg') 25% 10% no-repeat;
  }
  .img-card4{
    background: url('../assets/images/picture4.jpg') 100% 28% no-repeat;
  }
  .img-card5 {
    background: url('../assets/images/picture2.jpg') 15% 7% no-repeat;
  }
  p {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  </style>
